import { useSearchParams } from "@/router/hooks";
import useUserStore, { useUserToken } from "@/store/userStore";
import { useMemo, useState } from "react";
import styled from "styled-components";
import { DoubleRightOutlined } from '@ant-design/icons';
import { useMenuData, useMicroMenuData } from "@/store/menuStore";
import { m } from "framer-motion";
import { Card } from "antd";
import classNames from "classnames";

const MicroLeftWrapper = (props) => {
  const searchParams = useSearchParams()
  const screenUrl = searchParams.get('screenUrl')
  const modelMenus = []
  const [menuShow, setMenuShow] = useState(false)
  const { constantObjSSO } = useUserStore();

  const leftUrl = useMemo(() => {
    if (screenUrl) {
      return screenUrl
    } else {
      return constantObjSSO.LARGE_SCREEN_URL || location.origin + '/integration/largeScreen'
    }
  }, [screenUrl])

  const openAppPage = (menu) => {
    props.onRouter && props.onRouter(menu)
    // window.microApp.clearData()
    // // 强制发送
    // window.microApp.forceDispatch({
    //   screenData: {
    //     type: 'routerTo',  // 必须为 routerTo
    //     url: menu.url, // 需要跳转的地址
    //     name: menu.name, // 应用名称
    //     code: menu.code, // 应用编码
    //   }
    // })
    // routerMethod: menu.routerMethod, // 加载方式 1嵌入到iframe 2直接打开url 地址
    // openMethod: menu.openMethod,  // 打开方式 1当前窗口打开 2新建窗口打开
  }

  return <StyleWrap className="micro-left-wrapper">
    <div className="micro-app-wrapper">
      <micro-app name="micro-large-screen" url={leftUrl} iframe
      ></micro-app>
    </div>

    {/* 
    <m.div
      className="micro-left-menus"
      animate={menuShow ? "open" : "closed"}
      variants={{
        open: {
          bottom: "15%",
          opacity: 1,
          transition: {
            type: "tween",
            duration: 0.3,
          },
        },
        closed: {
          bottom: "13%",
          display: "none",
          opacity: 0,
          transition: {
            type: "tween",
            duration: 0.3,
          },
        },
      }}
    >
      <Card >
        <div className="cardBody">
          {modelMenus.map(menu => {
            return <div className="menuWrap" key={menu.id}>
              <div className="menuTitle">{menu.name}</div>
              {!!menu.children && menu.children.map(d => (<div key={d.id} className="menuItem" onClick={() => openAppPage(d)}>{d.name}</div>))}
            </div>
          })}
        </div>
      </Card>
    </m.div>

    <div className={classNames("micro-left-menus-toggle", { active: menuShow })} onClick={() => { setMenuShow(!menuShow) }}>
      <DoubleRightOutlined />
    </div> */}

    <div className="micro-right-menus-wrapper">
      <div className="micro-right-menus">
        {modelMenus.map(menu => {
          return <div key={menu.code} onClick={() => openAppPage(menu)} className="menu-item">{menu.name}</div>
        })}
      </div>
      <div className="micro-right-menus-toggle"><DoubleRightOutlined /></div>
    </div>
  </StyleWrap>;
}

const StyleWrap = styled.div`
  &.micro-left-wrapper {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
  }
  .micro-app-wrapper{
    width: 100%;
    height: 100%;
    overflow: auto;
  }


  .micro-left-menus{
    display: block;
    position: fixed;
    left: 25%;
    bottom: 15%;
    transform: translateX(-50%);
    .cardBody{
      display: flex;
    }
    .menuWrap{
      margin: 0 30px;
    }
    .menuTitle{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
    }
    .menuItem{
      margin-top: 10px;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover{
        color: #007fff;
      }
    }
  }

  .micro-left-menus-toggle{
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: rgb(50, 99, 148) solid 1px;
    background: linear-gradient(90deg,#075aad,#007fff);
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    position: fixed;
    left: 25%;
    bottom: 0;
    transform: translateX(-50%);
    &.active{
      .anticon{

        transform: rotate(90deg);
      }
    }
    .anticon {
    transition: all 0.3s ease;
      transform: rotate(-90deg);
    }
  }


  .micro-right-menus-wrapper{
    position: absolute;
    right: 0;
    bottom: 15%;
    display: flex;
    align-items: flex-end;
    .micro-right-menus{
      display: none;
    }
    &:hover{
      .micro-right-menus{ 
        display: flex;
      }
    }
  }
  .micro-right-menus{
    display: flex;
    border: 1px solid #326394;
    background: #002146;
    padding: 10px;
    border-radius: 5px;
    margin-right: 30px;
    max-width: 500px;
    flex-wrap: wrap;
    
    .menu-item{
      padding: 0 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      line-height: 38px;
      flex-shrink: 0;
      &:hover{
        color: #007fff;
      }
    }
  }

  .micro-right-menus-toggle{
    width: 30px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: rgb(50, 99, 148) solid 1px;
    background: linear-gradient(90deg,#075aad,#007fff);
    cursor: pointer;
    border-radius: 5px 0 0 5px;
    .anticon {
      transition: all 0.3s ease;
      transform: rotate(-180deg);
    }
  }
`

export default MicroLeftWrapper;